<template>
    <!-- <div class="into" > -->

    <div class="into table-wrapper" style="width:94%;height: 94%; margin-left:3%;">
        <div class="topTitle">
			<span style="color:#5cd9e8">
				<svg-icon icon-class="stotop"></svg-icon>
			</span>
            <span class="fs-xl text mx-2">今日任务情况</span>
        </div>
        <el-table :data="dataList" :cell-style="cellstyle" :header-cell-style="cellstyle" border
                  @sort-change="dataListSortChangeHandle"
                  style="width: 100%;height: 95%;margin-top: -1%;">
            <el-table-column prop="descr" label="物料名称" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="sku" label="物料编码" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="factorycdoe" label="计量编号/工装码" width='127' show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="lot6" label="计划单号" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="qty" label="数量">
            </el-table-column>
            <el-table-column prop="tolocation" label="库位编码">
            </el-table-column>
            <el-table-column prop="recipient" label="领用人">
            </el-table-column>
            <el-table-column prop="addtime" label="时间" show-overflow-tooltip>
            </el-table-column>
        </el-table>
        <el-pagination :current-page= "page"
                       :page-size="limit"
                       :total= "+total"
                       layout="total, prev, pager, next, jumper"
                       @size-change="pageSizeChangeHandle" @current-change="pageCurrentChangeHandle">
        </el-pagination>
    </div>
    <!-- </div> -->
</template>

<script>
import _ from "lodash";

    export default {
        data() {
            return {
                //tableData: [],
                //copy
                // 设置属性
                mixinViewModuleOptions: {
                    activatedIsNeed: true,    // 此页面是否在激活（进入）时，调用查询数据列表接口？
                    getDataListURL: '/API/getTodayTaskInfo2',       // 数据列表接口，API地址
                    getDataListIsPage: true, // 数据列表接口，是否需要分页？
                    deleteURL: '',            // 删除接口，API地址
                    deleteIsBatch: false,     // 删除接口，是否需要批量？
                    deleteIsBatchKey: 'id',   // 删除接口，批量状态下由那个key进行标记操作？比如：pid，uid...
                    exportURL: '',             // 导出接口，API地址

                },
                // 默认属性
                dataForm: {},               // 查询条件
                dataList: [],               // 数据列表
                order: '',                  // 排序，asc／desc
                orderField: '',             // 排序，字段
                page: 1,                    // 当前页码
                limit: 10,                  // 每页数
                total: 0,                   // 总条数
                total2: 200,
                dataListLoading: false,     // 数据列表，loading状态
                dataListSelections: [],     // 数据列表，多选项
                addOrUpdateVisible: false,   // 新增／更新，弹窗visible状态

                ref: '',
                relative: '',
                nextTick: ''
            }
        },
        //copy
        mounted() {
            this.fetchData();
        },
        created: function () {
            if (this.mixinViewModuleOptions.activatedIsNeed) {
                this.getDataList();
            }
        },
        methods: {
            fetchData() {
                // this.$http.get('/API/getTodayTaskInfo2',).then((response) => {
                //     if (response.data.code == 0) {
                //         this.dataList = response.data.data;
                //         setTimeout(this.fetchData, 1000);
                //     }
                //
                //
                // })
                this.getDataList();
                setTimeout(this.fetchData, 10000);

            },
            cellstyle(row, column, rowIndex, columnIndex) {
                return 'color:#FFFFFF';
            },
            // 获取数据列表
            getDataList: function () {
                const self = this;
                self.dataListLoading = true;
                self.$http.get(
                    //'/API/getTodayTaskInfo2?order=&orderField=&page=1&limit=10'
                    self.mixinViewModuleOptions.getDataListURL,
                    {
                        params: _.merge({
                            order: self.order,
                            orderField: self.orderField,
                            page: self.mixinViewModuleOptions.getDataListIsPage ? self.page : null,
                            limit: self.mixinViewModuleOptions.getDataListIsPage ? self.limit : null

                            // order: self.order,
                            // orderField: self.orderField,
                            // page: self.page,
                            // limit: self.limit
                        }, self.dataForm)
                    },
                ).then(function (res) {

                    //alert("res:"+res.data.data.sku);
                    self.dataListLoading = false;
                    if (res.data.code != 0) {
                        self.dataList = [];
                        self.total = 0;
                        return self.$message.error(res.data.msg);
                    }
                    self.dataList = self.mixinViewModuleOptions.getDataListIsPage ? res.data.data.records : res.data.data;

                    //alert("dataList:"+self.dataList);
                    if(res.data.data.param){
                        self.dataForm = res.data.data.param;
                    }
                    self.total = 0;
                    self.total = self.mixinViewModuleOptions.getDataListIsPage ? res.data.data.total : 0;


                }).catch(function () {

                    //alert("进来了catch，异常是"+a);
                    self.dataListLoading = false;
                })
            },
            // 排序
            dataListSortChangeHandle: function (data) {
                if (!data.order || !data.prop) {
                    this.order = '';
                    this.orderField = '';
                    return false;
                }
                this.order = data.order.replace(/ending$/, '');
                this.orderField = data.prop.replace(/([A-Z])/g, '_$1').toLowerCase();
                this.getDataList();
            },
            // 分页, 每页条数
            pageSizeChangeHandle: function (val) {
                this.page = 1;
                this.limit = val;
                this.$nextTick(() =>{
                    this.getDataList();
                })

            },
            // 分页, 当前页
            pageCurrentChangeHandle: function (val) {
                this.page = val;
                this.$nextTick(() =>{
                    this.getDataList();
                })
            }
        },
        destroyed() {
            this.$forceUpdate();
        }


    }
</script>

<style lang="scss" scoped>
    .into {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;

        .topTitle {
            height: 10%;
            padding-top: 15px;
        }

        .content {
            flex: 2;
        }
    }

    .table-wrapper /deep/ .el-table--fit {
        //padding: 20px;
    }

    .table-wrapper /deep/ .el-table,
    .el-table__expanded-cell {
        background-color: transparent;
    }

    .table-wrapper /deep/ .el-table tr {
        background-color: transparent !important;
    }

    .table-wrapper /deep/ .el-table th {
        //height: 20px;
        background-color: transparent !important;
    }


    .table-wrapper /deep/ .el-table--enable-row-transition .el-table__body td,
    .el-table .cell {
        background-color: transparent;
    }
</style>
